<template>
	<view class="container">
		<view class="address">
			<view class="grid" v-for="add in addressList" :key="add.id">
				<view class="left-text" @tap="toMenu">
					<view class="desc">{{add.desc}}     <text class="def_color" v-if="add.default_set==='1'">默认</text> </view>
					<text class="info">{{add.name}} {{add.phone}}</text>
				</view>
				<image src="@/static/images/edit.png" class="edit" @tap="editAddress(add)"></image>
				<u-icon name="trash-fill" color="red" size="26" @tap="delAdd(add.id)"></u-icon>
			</view>
		</view>
		<view class="create">
			<button shape="square" @tap="addAddress">新增地址</button>
		</view>
	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex'
	export default {
		data() {
			return {
				addressList:[]
			}
		},
		computed:{
			// ...mapState('address',['addressList'])
		},
		onLoad() {
			this.getAddressList()
			this.addressList=uni.getStorageSync('addressList')
		},
		methods: {
			...mapActions('address',['getAddressList','delAddress']),
			// 编辑地址按钮
			editAddress(adds){
				let add=JSON.stringify(adds)
				uni.navigateTo({
					url:`/subpackage/addAddress/addAddress?add=${add}`
				})
			},
			// 新增地址按钮
			addAddress(){
				uni.navigateTo({
					url:'/subpackage/addAddress/addAddress'
				})
			},
			// 删除地址
			delAdd(id){
				this.delAddress(id)
				this.getAddressList()
			},
			// 去商品页
			toMenu(){
				let add={}
				this.addressList.forEach(ele=>{
					if(ele.default_set==='1'){
						add=ele
					}
				})
				let addInfo=JSON.stringify(add)
				// console.log(addInfo);
				uni.reLaunch({
					url:`/pages/menu/menu?add=${addInfo}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	min-height: 85vh;
	background-color: #f1f8fa;
	.address{
		padding-top: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.grid{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			width: 690rpx;
			height: 164rpx;
			box-sizing: border-box;
			background-color: #fff;
			.left-text{
				display: flex;
				flex-direction: column;
				width: 560rpx;
				height: 84rpx;
				.desc{
					margin-bottom: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-weight: 700 !important;
					font-size: 32rpx;
					.def_color{
						font-size: 24rpx;
						color: blue;
					}
				}
				.info{
					color: #919293;
					font-size: 24rpx;
				}
			}
			.edit{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.create{
		height: 100rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		
		button {
			height: 80rpx;
			width: 80%;
			border-radius: 50rem !important;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #adb838;
			color: #FFFFFF;
		}
	}
}
</style>
